<template>
  <div :class="['left_tool_box', { left_hide: !show }]">
    <div id="stencil" :style="`width:${toolbarWidth}px`"></div>
    <FoldBtn v-model:show="show" />
  </div>
</template>

<script lang="ts">
import { toolbarWidth } from '@/config/index'
import FoldBtn from '@/components/FoldBtn.vue'
import { FlowGraph } from '@/common/FlowGraph'
import { defineComponent, reactive, onMounted } from 'vue'
import { createStencilTool } from '@/common/Stencil/createStencilTool'
/**模板工具组件 */
export default defineComponent({
  name: 'StencilTool',
  components: {
    FoldBtn
  },
  setup() {
    onMounted(() => {
      const stencil = createStencilTool(FlowGraph.graph)
      const stencilContainer = document.getElementById('stencil')!
      stencilContainer.appendChild(stencil.container)
    })
    return reactive({
      show: true,
      toolbarWidth
    })
  }
})
</script>

<style lang="less" scoped>
.left_tool_box {
  height: calc(100% - 40px);
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 100;
  transition: 0.4s;
  box-sizing: border-box;
  border-right: 1px solid #d9d9d9;
}
.left_hide {
  left: -280px;
  transition: 0.4s;
}
</style>
